<template>
  <div>
    <!-- <input type="text" v-model="name1" /> +
    <input type="text" v-model="name2" /> =
    <span>{{ fullName }}</span>
    <button @click="changeName">改名</button> -->

    <span>第一个多选框</span> <input type="checkbox" v-model="flag" /> <br />
    <span>第二个多选框</span> <input type="checkbox" v-model="flag1"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name1: '欧阳',
      name2: '霸天',
      flag: true,
    }
  },
  methods: {
    changeName() {
      this.fullName = 'harry-despot'
      // console.log(this.fullName);
    },
  },
  computed: {
    //默认写法
    // fullName() {
    //   return this.name1 + '-' + this.name2
    // },

    //完整写法
    fullName: {
      //在获取fullName这个计算属性的时候会调用get方法并且返回get的返回值
      get() {
        console.log('我是get，我被调用了')

        return this.name1 + '-' + this.name2
      },
      //在修改fullName这个计算属性的时候会调用set方法，set方法会传入一个要修改的值
      set(value) {
        console.log('我是set，我被调用了')
        this.name1 = value.split('-')[0]
        this.name2 = value.split('-')[1]
      },
    },

    flag1:{
        get(){
            return this.flag 
        },
        set(value){
           // console.log(value);
            this.flag = value
        }
    }

  },
}
</script>

<style></style>